<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>PhotoTime</title>

  <link rel="stylesheet" href="./vendor/reset.css">
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css"
        integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns"
        crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
</head>

<body>
  <header id="home">
    <div class="container">
      <nav class="nav">
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#photoapp">Photoapp</a></li>
          <li><img src="./images/header/navbarPic.png" alt="Camera"></li>
          <li><a href="#design">Design</a></li>
          <li><a href="#download">Download</a></li>
        </ul>
      </nav>
      <div class="slogan">
        <h1>Your life , a photo</h1>
        <p>print your lif in a simple photo</p>
        <button>Get started</button>
      </div>
      <div class="socialIcons">
        <i class="fab fa-twitter"></i>
        <i class="fab fa-flickr"></i>
        <i class="fab fa-dribbble"></i>
      </div>
    </div>
  </header>
  <main>
    <section class="firstContainer" id="photoapp">
      <div class="container first">
          <div class="simplePhoto">
            <h3>Represent your life with a simple photo</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,  sed do eiusmod tempor incididunt ut labore et dolore  magna aliqua.
              Ut enim ad minim veniam, quis  nostrud exercitation ullamco laboris nisi  ut aliquip ex ea commodo consequat.</p>
            <button>Get started</button>
          </div>
          <div class="hand">
            <img src="./images/main/Hand.png" alt="Hand with phone">
          </div>
      </div>
    </section>
    <section class="secondContainer" id="design">
      <div class="container">
        <div class="second">
          <div class="phone">
            <img src="./images/main/iPhone.png" alt="iPhone">
          </div>
          <div class="design">
            <h3>Design</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis
                nostrud exercitation ullamco laboris nisi
                ut aliquip ex ea commodo consequat.</p>
            <button>Learn more</button>
            <div class="angle">
              <p>01/05</p>
              <i class="fas fa-angle-left"></i><i class="fas fa-angle-right"></i>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="thirdContainer">
        <div class="container">

          <div class="communityAngle">
            <i class="fas fa-angle-left"></i><i class="fas fa-angle-right"></i>
          </div>
          <div class="third">
            <div class="community">
              <img src="./images/main/Livello4.png" alt="">
              <h4>Our community</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
            </div>
            <div class="pictures">
              <img src="./images/main/Livello5.png" alt="">
              <img src="./images/main/Livello6.png" alt="">
            </div>
          </div>
        </div>
      </section>
      <section class="fourthContainer">
          <div class="container">
            <div class="fourth">
              <div class="subscribe">
                <h2>Subscribe to our community</h2>
                <div class="input">
                    <input type="email" placeholder="Your email" name="Your email" id=""><button><i class="fas fa-check"></i></button>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section class="fifthContainer" id="download">
            <div class="container">
              <div class="fifth">
                <div class="download">
                  <h2>Download it</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <div class="store">
                    <div class="appleStore">
                      <button class="storeBtn">Apple store</button><button class="faApple"><i class="fab fa-apple"></i></button>
                    </div>
                    <div class="playStore">
                        <button class="storeBtn">Play store</button><button class="faAndroid"><i class="fab fa-android"></i></button>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </section>
  </main>
  <footer class="footer">
    <div class="container">
      <div class="copyright">
        <div>
          <ul>
            <li><a href="">Credits</a><span>|</span></li>
            <li><a href="">Privacy</a><span>|</span></li>
            <li><a href="">Our team</a></li>
          </ul>
          <p>Copyright by phototime - all rights reserved</p>
        </div>
        <img src="./images/main/Livello4.png" alt="">
      </div>
    </div>
  </footer>
  <button id="up"><a href="#home" style="color: white"><i class="fas fa-arrow-up"></i></a></button>
</body>

</html>